<template>
    <div class="h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col overflow-hidden">
        <!-- 头部标题区域 -->
        <div class="text-center pt-4 sm:pt-6 md:pt-8 pb-2 sm:pb-3 md:pb-4 flex-shrink-0">
            <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-blue-600 mb-2 sm:mb-4">
                检测结果
            </h1>
        </div>

        <!-- 主内容 -->
        <div class="flex-1 overflow-auto p-4 md:p-6">
            <div class="max-w-6xl mx-auto">
                <!-- 关键功能：左右分栏，左侧图片，右侧检测结果与功能按钮 -->
                <div class="bg-white rounded-md shadow-lg p-6">
                    <div class="flex flex-col lg:flex-row gap-6">
                        <!-- 左侧：原图/检测结果/人工标注视图（按模式切换布局） -->
                        <div class="flex-1">
                            <ManualAnnotator
                                ref="manualRef"
                                :originalImage="originalImage"
                                :resultImage="resultImage"
                                :annotateMode="annotateMode"
                                @preview="previewImage"
                                @manual-update="onManualUpdate"
                            />
                        </div>

                        <!-- 右侧：检测结果信息与功能按钮 -->
                        <div class="w-full lg:w-[380px]">
                            <!-- 关键功能：右侧栏在退出人工标注后仍保留并展示人工结果 -->
                            <ResultSidebar
                                :detectionRatio="detectionRatio"
                                :diagnosis="diagnosis"
                                :showManualData="annotateMode || manualAnnotDone"
                                :manualPercent="manualPercent"
                                :manualDiagnosisDisplay="manualDiagnosisDisplay"
                            />

                            <!-- 关键功能：功能按钮 -->
                            <div class="mt-6 grid grid-cols-1 gap-3">
                                <!-- 关键功能：人工标注开关按钮 -->
                                <button @click="onToggleAnnotateClicked"
                                        class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-md transition-colors duration-300">
                                    {{ annotateMode ? '退出人工标注' : '人工标注' }}
                                </button>

                                <!-- 关键功能：人工标注操作按钮（仅在开启时显示） -->
                                <div v-if="annotateMode" class="grid grid-cols-1 gap-3">
                                    <button @click="onStartRegionClicked('CAVITY')"
                                            class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-md transition-colors duration-300">
                                        标注 腔体区域
                                    </button>
                                    <button @click="onStartRegionClicked('ADENOID')"
                                            class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-md transition-colors duration-300">
                                        标注 腺样体区域
                                    </button>
                                    <button @click="onFinishPolygonClicked" :disabled="!canFinish()"
                                            class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed">
                                        完成当前区域标注
                                    </button>
                                    <button @click="onUndoPointClicked" :disabled="!canUndo()"
                                            class="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold rounded-md transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed">
                                        撤销节点
                                    </button>
                                    <button @click="onClearManualClicked"
                                            class="px-6 py-3 bg-gray-700 hover:bg-gray-800 text-white font-semibold rounded-md transition-colors duration-300">
                                        清除人工标注
                                    </button>
                                    <button @click="onCompleteAnnotateClicked" :disabled="!manualAnnotDone"
                                            class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-md transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed">
                                        完成标注
                                    </button>
                                </div>
                                <button v-if="!annotateMode" @click="onContinueUploadClicked"
                                        class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-md transition-colors duration-300">
                                    继续上传新图片
                                </button>
                                <button v-if="!annotateMode" @click="onViewHistoryClicked"
                                        class="px-6 py-3 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md transition-colors duration-300">
                                    查看历史记录
                                </button>
                                <button v-if="!annotateMode" @click="onGoHomeClicked"
                                        class="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white font-semibold rounded-md transition-colors duration-300">
                                    返回主页
                                </button>
                            </div>

                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片预览组件 - 使用简单的模态框 -->
        <div v-if="preview.show" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
            @click="preview.show = false">
            <div class="relative max-w-4xl max-h-full p-4">
                <img :src="preview.url" alt="预览图片" class="max-w-full max-h-full rounded-md">
                <button @click="preview.show = false"
                    class="absolute top-2 right-2 bg-white text-gray-800 rounded-full p-2 hover:bg-gray-200">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- 提示信息 -->
        <div v-if="snack.show" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50">
            <div :class="`px-6 py-3 rounded-md shadow-lg text-white font-medium ${getSnackColor()}`">
                {{ snack.content }}
            </div>
        </div>

        <!-- 关键功能：未完成标注提示对话框 -->
        <Dialog v-model:show="incompleteDialog.show"
                title="提示"
                message="当前标注未完成，是否退出标注？"
                @confirm="onIncompleteConfirm"
                @cancel="onIncompleteCancel" />
        <!-- 关键功能：二次人工标注确认弹窗（清空原有数据） -->
        <Dialog v-model:show="reAnnotateDialog.show"
                title="提示"
                message="是否重新人工标注？选择是则清空原有人工标注数据"
                @confirm="onReAnnotateConfirm"
                @cancel="onReAnnotateCancel" />
        <!-- 关键功能：指定区域重新标注确认弹窗（清空该区域数据） -->
        <Dialog v-model:show="regionReAnnotateDialog.show"
                title="提示"
                message="该区域已完成，是否重新标注？选择是则清除原有该区域标注"
                @confirm="onRegionReAnnotateConfirm"
                @cancel="onRegionReAnnotateCancel" />
        <!-- 关键功能：完成标注保存确认弹窗 -->
        <Dialog v-model:show="completeDialog.show"
                title="提示"
                message="是否保存当前标注？选择是则退出人工标注"
                @confirm="onCompleteConfirm"
                @cancel="onCompleteCancel" />
    </div>
</template>

<script>
import Dialog from '@/components/dialog.vue'
import ManualAnnotator from '@/components/ManualAnnotator.vue'
import ResultSidebar from '@/components/ResultSidebar.vue'
export default {
    components: { Dialog, ManualAnnotator, ResultSidebar },
    data() {
        return {
            // 检测结果数据
            originalImage: '',
            resultImage: '',
            detectionRatio: 0,
            diagnosis: '',
            historyId: null,

            // UI状态
            preview: {
                show: false,
                url: ''
            },
            snack: {
                show: false,
                content: '',
                type: 'info' // 'success', 'error', 'info'
            },

            // 关键功能：人工标注状态
            annotateMode: false,
            // annotCtx: null,
            // currentLabel: null, // 'ADENOID' | 'CAVITY'
            // currentPoints: [],
            // polyAdenoid: null, // { points: [{x,y}, ...] }
            // polyCavity: null,  // { points: [{x,y}, ...] }
            areaAdenoid: 0,
            areaCavity: 0,
            manualDiagnosis: '',
            manualAnnotDone: false,
            // 关键功能：人工标注基准尺寸，用于不同显示尺寸下准确缩放绘制
            // annotBaseW: 0,
            // annotBaseH: 0
            // ,
            // 关键功能：未完成标注提示对话框与待执行操作
            incompleteDialog: { show: false },
            pendingAction: null,
            // 关键功能：二次人工标注确认弹窗
            reAnnotateDialog: { show: false },
            // 关键功能：指定区域重新标注确认弹窗
            regionReAnnotateDialog: { show: false, label: null },
            // 关键功能：完成标注保存确认弹窗
            completeDialog: { show: false }
        }
    },

    computed: {
        // // 关键功能：腺样体/腔体 比值文本
        // ratioText() {
        //     if (!this.areaCavity || this.areaCavity === 0) return '0.000'
        //     return (this.areaAdenoid / this.areaCavity).toFixed(3)
        // },
        // // 关键功能：标注完成判定（两个区域均已闭合）
        // annotDone() {
        //     const aDone = this.polyAdenoid && Array.isArray(this.polyAdenoid.points) && this.polyAdenoid.points.length >= 3
        //     const cDone = this.polyCavity && Array.isArray(this.polyCavity.points) && this.polyCavity.points.length >= 3
        //     return aDone && cDone
        // },
        // 人工标注展示：百分比
        manualPercent() {
            if (!this.areaCavity || this.areaCavity === 0) return (0).toFixed(1)
            const ratio = this.areaAdenoid / this.areaCavity
            return (ratio * 100).toFixed(1)
        },
        // 人工标注展示：诊断文案
        manualDiagnosisDisplay() {
            const hasRatio = this.areaCavity > 0 && this.areaAdenoid >= 0
            if (!hasRatio || !this.manualAnnotDone) return '待检测'
            return this.manualDiagnosis || '待检测'
        }
    },

    mounted() {
        this.loadDetectionResult();
    },

    methods: {
        // 加载检测结果
        loadDetectionResult() {
            const query = this.$route.query;

            if (query.originalImage) {
                this.originalImage = query.originalImage;
            }

            if (query.resultImage) {
                this.resultImage = query.resultImage;
            }

            if (query.ratio) {
                this.detectionRatio = parseFloat(query.ratio);
            }

            if (query.diagnosis) {
                this.diagnosis = query.diagnosis;
            }

            if (query.historyId) {
                this.historyId = parseInt(query.historyId);
            }

            // 验证数据完整性
            if (!this.originalImage || !this.resultImage || !this.diagnosis) {
                this.showSnack('检测结果数据不完整，请重新检测', 'error');
                setTimeout(() => {
                    this.$router.push('/main/uploadpicture');
                }, 2000);
            }
        },

        // 根据诊断结果获取颜色类
        getDiagnosisColor() {
            if (this.diagnosis === '正常') {
                return 'bg-green-50';
            } else if (this.diagnosis === '轻微堵塞') {
                return 'bg-yellow-50';
            } else if (this.diagnosis === '堵塞严重') {
                return 'bg-red-50';
            }
            return 'bg-gray-50';
        },
        // 人工标注诊断颜色
        getManualDiagnosisColor() {
            const text = this.manualDiagnosisDisplay
            if (text === '正常') return 'bg-green-50'
            if (text === '轻微堵塞') return 'bg-yellow-50'
            if (text === '堵塞严重') return 'bg-red-50'
            return 'bg-gray-50'
        },

        // 获取提示框颜色
        getSnackColor() {
            switch (this.snack.type) {
                case 'success':
                    return 'bg-green-500';
                case 'error':
                    return 'bg-red-500';
                case 'info':
                default:
                    return 'bg-blue-500';
            }
        },

        // 预览图片
        previewImage(url) {
            this.preview.url = url;
            this.preview.show = true;
        },

        // 显示提示信息
        showSnack(content, type = 'info') {
            this.snack.content = content;
            this.snack.type = type;
            this.snack.show = true;

            // 3秒后自动隐藏
            setTimeout(() => {
                this.snack.show = false;
            }, 3000);
        },

        // 继续上传新图片
        continueUpload() {
            this.$router.push('/main/uploadpicture');
        },

        // 返回主页
        goToHome() {
            this.$router.push('/main/home');
        },

        // 查看历史记录
        viewHistory() {
            this.$router.push('/main/history');
        },

        // 关键功能：切换人工标注模式（子组件负责画布初始化与预览）
        toggleAnnotate() {
            this.annotateMode = !this.annotateMode
        },
        // 关键功能：点击前置守卫，若有未完成标注则弹出确认对话框
        checkIncompleteAndRun(actionFn) {
            const hasIncomplete = this.annotateMode && this.$refs.manualRef && this.$refs.manualRef.hasIncomplete && this.$refs.manualRef.hasIncomplete()
            if (hasIncomplete) {
                this.pendingAction = actionFn
                this.incompleteDialog.show = true
            } else {
                actionFn()
            }
        },
        onIncompleteConfirm() {
            this.incompleteDialog.show = false
            if (typeof this.pendingAction === 'function') this.pendingAction()
            this.pendingAction = null
        },
        onIncompleteCancel() {
            this.incompleteDialog.show = false
            this.pendingAction = null
        },
        // 关键功能：按钮包装 - 切换人工标注
        onToggleAnnotateClicked() {
            // 关键功能：当已有人工结果且当前不在标注模式，点击将提示是否重新标注
            if (!this.annotateMode && this.manualAnnotDone) {
                this.reAnnotateDialog.show = true
                return
            }
            this.checkIncompleteAndRun(() => this.toggleAnnotate())
        },
        // 关键功能：二次人工标注确认 - 清空原有数据并进入标注模式
        onReAnnotateConfirm() {
            this.reAnnotateDialog.show = false
            if (this.$refs.manualRef && this.$refs.manualRef.clearManual) this.$refs.manualRef.clearManual()
            this.areaAdenoid = 0
            this.areaCavity = 0
            this.manualDiagnosis = ''
            this.manualAnnotDone = false
            this.annotateMode = true
        },
        onReAnnotateCancel() {
            this.reAnnotateDialog.show = false
        },
        // 关键功能：按钮包装 - 完成整体标注（两个区域均完成后启用）
        onCompleteAnnotateClicked() {
            if (!this.manualAnnotDone) return
            this.completeDialog.show = true
        },
        // 关键功能：完成标注确认 - 保存并回到原状态（退出人工标注，保留人工结果展示）
        onCompleteConfirm() {
            this.completeDialog.show = false
            this.showSnack('已保存人工标注', 'success')
            this.annotateMode = false
        },
        // 关键功能：完成标注取消 - 继续停留在人工标注状态
        onCompleteCancel() {
            this.completeDialog.show = false
        },
        // 关键功能：指定区域重新标注确认/取消
        onRegionReAnnotateConfirm() {
            const label = this.regionReAnnotateDialog.label
            this.regionReAnnotateDialog.show = false
            if (!label) return
            const ref = this.$refs.manualRef
            if (ref && ref.clearRegion) ref.clearRegion(label)
            if (ref && ref.startRegion) ref.startRegion(label)
            this.regionReAnnotateDialog.label = null
        },
        onRegionReAnnotateCancel() {
            this.regionReAnnotateDialog.show = false
            this.regionReAnnotateDialog.label = null
        },
        // 关键功能：按钮包装 - 开始标注区域（若区域已完成则提示是否重新标注）
        onStartRegionClicked(label) {
            this.checkIncompleteAndRun(() => {
                const ref = this.$refs.manualRef
                if (!ref) return
                if (ref.isRegionCompleted && ref.isRegionCompleted(label)) {
                    this.regionReAnnotateDialog.label = label
                    this.regionReAnnotateDialog.show = true
                } else if (ref.startRegion) {
                    ref.startRegion(label)
                }
            })
        },
        // 关键功能：按钮包装 - 清除人工标注
        onClearManualClicked() {
            this.checkIncompleteAndRun(() => {
                if (this.$refs.manualRef && this.$refs.manualRef.clearManual) this.$refs.manualRef.clearManual()
            })
        },
        // 关键功能：按钮包装 - 完成当前区域
        onFinishPolygonClicked() {
            if (this.$refs.manualRef && this.$refs.manualRef.finishPolygon) this.$refs.manualRef.finishPolygon()
        },
        // 关键功能：按钮包装 - 撤销节点
        onUndoPointClicked() {
            if (this.$refs.manualRef && this.$refs.manualRef.undoPoint) this.$refs.manualRef.undoPoint()
        },
        // 关键功能：按钮禁用判断
        canFinish() {
            return !!(this.$refs.manualRef && this.$refs.manualRef.canFinish)
        },
        canUndo() {
            return !!(this.$refs.manualRef && this.$refs.manualRef.canUndo)
        },
        // 关键功能：按钮包装 - 路由跳转
        onContinueUploadClicked() {
            this.checkIncompleteAndRun(() => this.continueUpload())
        },
        onGoHomeClicked() {
            this.checkIncompleteAndRun(() => this.goToHome())
        },
        onViewHistoryClicked() {
            this.checkIncompleteAndRun(() => this.viewHistory())
        },
        // 关键功能：接收子组件人工标注更新（面积与判断）
        onManualUpdate(payload) {
            if (!payload) return
            this.areaAdenoid = payload.areaAdenoid || 0
            this.areaCavity = payload.areaCavity || 0
            this.manualDiagnosis = payload.manualDiagnosis || ''
            this.manualAnnotDone = !!payload.annotDone
        },
        // // 关键功能：初始化叠加画布尺寸与上下文
        // initAnnotCanvas() {
        //     const container = this.$refs.originalContainer
        //     const canvas = this.$refs.annotCanvas
        //     if (!container || !canvas) return
        //     const rect = container.getBoundingClientRect()
        //     canvas.width = Math.round(rect.width)
        //     canvas.height = Math.round(rect.height)
        //     this.annotCtx = canvas.getContext('2d')
        //     // 关键功能：建立基准尺寸，所有点按基准尺寸坐标记录，用于缩放绘制与预览
        //     if (!this.annotBaseW || !this.annotBaseH) {
        //         this.annotBaseW = canvas.width
        //         this.annotBaseH = canvas.height
        //     }
        //     this.redrawAnnot()
        // },
        // // 关键功能：窗口尺寸变化时同步叠加画布尺寸
        // updateAnnotCanvasSize() {
        //     if (!this.annotateMode) return
        //     this.initAnnotCanvas()
        //     if (this.annotDone) this.initAnnotPreviewCanvas()
        // },
        // // 关键功能：开始标注某个区域（腺样体/腔体）
        // startRegion(label) {
        //     this.currentLabel = label === 'ADENOID' ? 'ADENOID' : 'CAVITY'
        //     this.currentPoints = []
        //     this.redrawAnnot()
        // },
        // // 关键功能：在叠加画布上点击添加节点
        // onAnnotClick(e) {
        //     if (!this.annotateMode || !this.currentLabel) return
        //     const canvas = this.$refs.annotCanvas
        //     if (!canvas) return
        //     const rect = canvas.getBoundingClientRect()
        //     const scaleXDisplay = canvas.width / rect.width
        //     const scaleYDisplay = canvas.height / rect.height
        //     const xDisplay = (e.clientX - rect.left) * scaleXDisplay
        //     const yDisplay = (e.clientY - rect.top) * scaleYDisplay
        //     // 关键功能：将显示坐标转换为基准尺寸坐标存储，保障缩放后仍准确绘制
        //     const toBaseX = this.annotBaseW > 0 ? (this.annotBaseW / canvas.width) : 1
        //     const toBaseY = this.annotBaseH > 0 ? (this.annotBaseH / canvas.height) : 1
        //     const x = Math.round(xDisplay * toBaseX)
        //     const y = Math.round(yDisplay * toBaseY)
        //     this.currentPoints.push({ x, y })
        //     this.redrawAnnot()
        // },
        // // 关键功能：撤销最后一个节点
        // undoPoint() {
        //     if (this.currentPoints.length === 0) return
        //     this.currentPoints.pop()
        //     this.redrawAnnot()
        // },
        // // 关键功能：完成多边形并计算面积与判断
        // finishPolygon() {
        //     if (this.currentPoints.length < 3 || !this.currentLabel) return
        //     const poly = { points: this.currentPoints.slice() }
        //     if (this.currentLabel === 'ADENOID') this.polyAdenoid = poly
        //     else this.polyCavity = poly
        //     this.currentPoints = []
        //     this.currentLabel = null
        //     this.updateAreasAndDiagnosis()
        //     this.redrawAnnot()
        //     if (this.annotDone) {
        //         // 关键功能：标注完成后初始化并绘制预览图
        //         this.$nextTick(() => {
        //             this.initAnnotPreviewCanvas()
        //             this.redrawAnnotPreview()
        //         })
        //     }
        // },
        // // 关键功能：清除人工标注
        // clearManual() {
        //     this.currentPoints = []
        //     this.currentLabel = null
        //     this.polyAdenoid = null
        //     this.polyCavity = null
        //     this.areaAdenoid = 0
        //     this.areaCavity = 0
        //     this.manualDiagnosis = ''
        //     this.redrawAnnot()
        // },
        // // 关键功能：绘制当前标注态与已完成区域
        // redrawAnnot() {
        //     const canvas = this.$refs.annotCanvas
        //     const ctx = this.annotCtx
        //     if (!canvas || !ctx) return
        //     ctx.clearRect(0, 0, canvas.width, canvas.height)
        //     // 关键功能：根据当前画布尺寸相对于基准尺寸的缩放因子进行绘制，以避免偏差
        //     const sx = this.annotBaseW > 0 ? (canvas.width / this.annotBaseW) : 1
        //     const sy = this.annotBaseH > 0 ? (canvas.height / this.annotBaseH) : 1
        //     // 已完成：腔体区域（绿色）
        //     if (this.polyCavity && this.polyCavity.points.length >= 3) {
        //         ctx.save()
        //         ctx.beginPath()
        //         const pts = this.polyCavity.points
        //         ctx.moveTo(pts[0].x * sx, pts[0].y * sy)
        //         for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * sx, pts[i].y * sy)
        //         ctx.closePath()
        //         ctx.fillStyle = 'rgba(16,185,129,0.35)'
        //         ctx.strokeStyle = '#10b981'
        //         ctx.lineWidth = 2
        //         ctx.fill()
        //         ctx.stroke()
        //         ctx.restore()
        //     }
        //     // 已完成：腺样体区域（红色）
        //     if (this.polyAdenoid && this.polyAdenoid.points.length >= 3) {
        //         ctx.save()
        //         ctx.beginPath()
        //         const pts = this.polyAdenoid.points
        //         ctx.moveTo(pts[0].x * sx, pts[0].y * sy)
        //         for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * sx, pts[i].y * sy)
        //         ctx.closePath()
        //         ctx.fillStyle = 'rgba(239,68,68,0.35)'
        //         ctx.strokeStyle = '#ef4444'
        //         ctx.lineWidth = 2
        //         ctx.fill()
        //         ctx.stroke()
        //         ctx.restore()
        //     }
        //     // 当前编辑态：节点与折线（蓝色）
        //     if (this.currentPoints.length > 0) {
        //         ctx.save()
        //         ctx.strokeStyle = '#3b82f6'
        //         ctx.lineWidth = 2
        //         const pts = this.currentPoints
        //         ctx.beginPath()
        //         ctx.moveTo(pts[0].x * sx, pts[0].y * sy)
        //         for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * sx, pts[i].y * sy)
        //         ctx.stroke()
        //         ctx.fillStyle = '#3b82f6'
        //         for (const p of pts) {
        //             ctx.beginPath()
        //             ctx.arc(p.x * sx, p.y * sy, 3, 0, Math.PI * 2)
        //             ctx.fill()
        //         }
        //         ctx.restore()
        //     }
        // },
        // // 关键功能：初始化人工标注预览画布尺寸
        // initAnnotPreviewCanvas() {
        //     const container = this.$refs.annotPreviewContainer
        //     const canvas = this.$refs.annotPreviewCanvas
        //     if (!container || !canvas) return
        //     const rect = container.getBoundingClientRect()
        //     canvas.width = Math.round(rect.width)
        //     canvas.height = Math.round(rect.height)
        // },
        // // 关键功能：绘制人工标注预览（只读）
        // redrawAnnotPreview() {
        //     const canvas = this.$refs.annotPreviewCanvas
        //     if (!canvas) return
        //     const ctx = canvas.getContext('2d')
        //     ctx.clearRect(0, 0, canvas.width, canvas.height)
        //     // 关键功能：预览画布按基准尺寸缩放绘制，避免偏差
        //     const sx = this.annotBaseW > 0 ? (canvas.width / this.annotBaseW) : 1
        //     const sy = this.annotBaseH > 0 ? (canvas.height / this.annotBaseH) : 1
        //     // 腔体（绿色）
        //     if (this.polyCavity && this.polyCavity.points.length >= 3) {
        //         ctx.save()
        //         ctx.beginPath()
        //         const pts = this.polyCavity.points
        //         ctx.moveTo(pts[0].x * sx, pts[0].y * sy)
        //         for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * sx, pts[i].y * sy)
        //         ctx.closePath()
        //         ctx.fillStyle = 'rgba(16,185,129,0.35)'
        //         ctx.strokeStyle = '#10b981'
        //         ctx.lineWidth = 2
        //         ctx.fill()
        //         ctx.stroke()
        //         ctx.restore()
        //     }
        //     // 腺样体（红色）
        //     if (this.polyAdenoid && this.polyAdenoid.points.length >= 3) {
        //         ctx.save()
        //         ctx.beginPath()
        //         const pts = this.polyAdenoid.points
        //         ctx.moveTo(pts[0].x * sx, pts[0].y * sy)
        //         for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x * sx, pts[i].y * sy)
        //         ctx.closePath()
        //         ctx.fillStyle = 'rgba(239,68,68,0.35)'
        //         ctx.strokeStyle = '#ef4444'
        //         ctx.lineWidth = 2
        //         ctx.fill()
        //         ctx.stroke()
        //         ctx.restore()
        //     }
        // },
        // // 关键功能：鞋带公式计算面积
        // shoelaceArea(points) {
        //     let area = 0
        //     const n = points.length
        //     for (let i = 0; i < n; i++) {
        //         const { x: x1, y: y1 } = points[i]
        //         const { x: x2, y: y2 } = points[(i + 1) % n]
        //         area += x1 * y2 - x2 * y1
        //     }
        //     return Math.abs(area) / 2
        // },
        // // 关键功能：更新面积与人工判断
        // updateAreasAndDiagnosis() {
        //     this.areaAdenoid = this.polyAdenoid ? Math.round(this.shoelaceArea(this.polyAdenoid.points)) : 0
        //     this.areaCavity = this.polyCavity ? Math.round(this.shoelaceArea(this.polyCavity.points)) : 0
        //     // 简单判定策略，可按需调整阈值
        //     const ratio = this.areaCavity > 0 ? this.areaAdenoid / this.areaCavity : 0
        //     if (ratio === 0) this.manualDiagnosis = '未完成标注'
        //     else if (ratio < 0.3) this.manualDiagnosis = '正常'
        //     else if (ratio < 0.5) this.manualDiagnosis = '轻微堵塞'
        //     else this.manualDiagnosis = '堵塞严重'
        // }
    }
}
</script>

<style scoped>
/* 确保大屏幕上的适当间距 */
@media (min-width: 1024px) {
    .max-w-6xl {
        max-width: 1024px;
    }
}

/* 图片悬停效果 */
img {
    transition: opacity 0.2s ease-in-out;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
    .grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}
</style>
